<template>
  <div class="page_view flex">
    <van-nav-bar
      style="background: #0caaed"
      left-arrow
      @click-left="$router.back()"
    >
      <template slot="title">
        <span style="color: #ffffff;">便签信息</span>
      </template>
      <template slot="left">
        <van-icon name="arrow-left" size="20px" color="#ffffff"/>
      </template>
      <template slot="right">
        <van-icon name="ellipsis" size="20px" color="#ffffff" @click="showTip = true"/>
      </template>
    </van-nav-bar>
    <div class="flex1 at pd10">
      <my-card :note="noteItem" :show="true" v-if="noteItem"></my-card>
      <van-skeleton title :row="3" v-else/>
      <van-empty v-if="error" image="error" description="糟糕，数据没找到" />
    </div>
    <van-dialog v-model="showTip" title="标题">
      <div class="tip_view">
        <van-divider content-position="left">博客地址</van-divider>
        <a href="https://web03.cn" style="color: #008cf0" target="_blank">https://web03.cn</a>
        <van-divider content-position="left">群聊</van-divider>
        <a href="https://jq.qq.com/?_wv=1027&k=riKJjEDg" target="_blank">
          <img src="https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/qqgroup.png" alt="" width="120px">
        </a>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data () {
    return {
      noteItem: null,
      error: false,
      showTip: false
    }
  },
  methods: {
    getNote(){
      this.request.getNoteById({id: this.$route.params.id})
        .then(res => {
          if (res.data){
            let noteItem = res.data
            noteItem.tags = noteItem.tags.split(',')
            this.noteItem = noteItem
          } else {
            this.error = true
          }
        }).catch(()=>{
          this.error = true
        })
    }
  },
  created() {
    this.getNote()
  }
}
</script>

<style scoped lang="less">
  .tip_view{
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
  }
</style>
